<!DOCTYPE html>
<html>
<head>
    <title>设备维修工单详情</title>
    #parse("sys/header.html")
</head>
<style>
    .lineConten{
        border-bottom: 1px dashed #b6b4b4;
        margin-top: 10px
    }
    .imgBox{
       /*border: 1px solid #E1E1E1;*/
      padding-left: 2px;
    }
</style>
<body>
<div id="rrapp" v-cloak>
    <Card>
        <Tabs value="record0" type="card">
            <Tab-pane label="工单详情" name="record0">
                <i-form ref="formValidate" :label-width="120">
                    <row>
                        <i-col span="12">
                            <row>
                                <i-col span="12">
                                    <Form-item  label="设备名称" prop="devName">
                                        <i-input v-model="devMaintenWork.devName" placeholder="设备名称" readonly></i-input>
                                    </Form-item>
                                </i-col>
                                <i-col span="12">
                                    <Form-item  label="设备编号" prop="devCode">
                                        <i-input v-model="devMaintenWork.devCode" placeholder="设备编号" readonly></i-input>
                                    </Form-item>
                                </i-col>
                            </row>
                        </i-col>
                        <i-col span="12">
                            <row>
                                <i-col span="12">
                                    <Form-item label="所处车间">
                                        <i-input v-model="devMaintenWork.workshopName" readonly></i-input>
                                    </Form-item>
                                </i-col>
                                <i-col span="12">
                                    <Form-item label="产线">
                                        <i-input v-model="devMaintenWork.devProductName + ' ' + devMaintenWork.devProductCode" readonly></i-input>
                                    </Form-item>
                                </i-col>
                            </row>
                        </i-col>
                    </row>
                    <row>
                        <i-col span="12">
                            <row>
                                <i-col span="12">
                                    <Form-item label="工序名称">
                                        <i-input v-model="devMaintenWork.devProceName" readonly></i-input>
                                    </Form-item>
                                </i-col>
                                <i-col span="12">
                                    <Form-item label="工序编码">
                                        <i-input v-model="devMaintenWork.devProceNo" readonly></i-input>
                                    </Form-item>
                                </i-col>
                            </row>
                        </i-col>
                    </row>
                    <row>
                        <i-col span="12">
                            <row>
                                <i-col :xs="8" :sm="8" :md="8" :lg="8">
                                    <Form-item  label="报警分类" prop="vrtId">
                                        <i-input  v-model="devMaintenWork.vrtName" placeholder="设备选择后系统自动拉取" readonly></i-input>
                                    </Form-item>
                                </i-col>
                                <i-col :xs="8" :sm="8" :md="8" :lg="8">
                                    <Form-item :label-width="28" label="-">
                                        <i-select placeholder="请选择VFG" v-model="devMaintenWork.vfgId" readonly>
                                            <i-option v-for="vfg in vfgList" :value="vfg.id" :key="vfg.id">
                                                {{vfg.name}}
                                            </i-option>
                                        </i-select>
                                    </Form-item>
                                </i-col>
                                <i-col :xs="8" :sm="8" :md="8" :lg="8">
                                    <Form-item :label-width="28" label="-">
                                        <i-select placeholder="请选择CCC" v-model="devMaintenWork.faultCategoryId" readonly>
                                            <i-option v-for="ccc in cccList" :value="ccc.id" :key="ccc.id">
                                                {{ccc.name}}
                                            </i-option>
                                        </i-select>
                                    </Form-item>
                                </i-col>
                            </row>
                        </i-col>
                        <i-col span="12">
                            <row>
                                <i-col span="12">
                                    <row>
                                        <Form-item  label="报警代码" prop="faultCode">
                                            <div style="display: flex;">
                                                <i-select v-model="devMaintenWork.faultId" readonly>
                                                    <i-option v-for="alarm in alarmList" :value="alarm.id" :key="alarm.id">{{alarm.alarmCode + ' ' + alarm.alarmDesc}}</i-option>
                                                </i-select>
                                            </div>
                                        </Form-item>
                                    </row>
                                </i-col>
                                <i-col span="12">
                                    <Form-item label="报警描述" prop="faultDesc">
                                        <i-input v-model="devMaintenWork.faultDesc" placeholder="报警描述"></i-input>
                                    </Form-item>
                                </i-col>
                            </row>
                        </i-col>
                    </row>
                    <Row>
                        <i-col span="12">
                            <row>
                                <i-col span="12">
                                    <Form-item label="工单编号">
                                        <i-input v-model="devMaintenWork.repairCode" readonly></i-input>
                                    </Form-item>
                                </i-col>
                                <i-col span="12">
                                    <Form-item label="来源">
                                        <i-input v-model="ticketSource[devMaintenWork.source]" readonly></i-input>
                                    </Form-item>
                                </i-col>
                            </row>
                        </i-col>
                        <i-col span="12">
                            <row>
                                <i-col span="12">
                                    <Form-item label="工单状态">
                                        <i-input v-model="sysEnums.REPAIR_TICKET_STATUS[devMaintenWork.devStatus]" readonly></i-input>
                                    </Form-item>
                                </i-col>
                                <i-col span="12">
                                    <Form-item label="故障时长">
                                        <i-input v-model="devMaintenWork.duration" readonly></i-input>
                                    </Form-item>
                                </i-col>
                            </row>
                        </i-col>
                    </Row>
                    <Row>
                       <i-col span="12">
                           <row>
                               <i-col span="12">
                                   <Form-item label="报修人">
                                       <i-input v-model="devMaintenWork.uploadName" readonly></i-input>
                                   </Form-item>
                               </i-col>
                               <i-col span="12">
                                   <Form-item label="报修时间">
                                       <i-input v-model="devMaintenWork.uploadDate" readonly></i-input>
                                   </Form-item>
                               </i-col>
                           </row>
                       </i-col>
                        <i-col span="12">
                            <row>
                                <i-col span="12">
                                    <Form-item  label="维修开始时间" prop="repairStartDate">
                                        <Date-picker v-model="devMaintenWork.repairStartDate"
                                                     format="yyyy-MM-dd HH:mm"
                                                     type="datetime" placeholder="开始维修时间"
                                                     readonly
                                                     style="width: 100%"
                                        ></Date-picker>
                                    </Form-item>
                                </i-col>
                                <i-col span="12">
                                    <Form-item  label="维修结束时间" prop="repairEndDate">
                                        <Date-picker v-model="devMaintenWork.repairEndDate"
                                                     format="yyyy-MM-dd HH:mm"
                                                     type="datetime"
                                                     placeholder="结束维修时间"
                                                     readonly
                                                     style="width: 100%"
                                        ></Date-picker>
                                    </Form-item>
                                </i-col>
                            </row>
                        </i-col>

                    </Row>
                    <Row>
                        <i-col span="12">
                            <row>
                                <i-col span="12">
                                    <Form-item  label="维修人/补录人员" prop="devCode">
                                        <i-input v-model="devMaintenWork.repairUsername" readonly></i-input>
                                    </Form-item>
                                </i-col>
                                <i-col span="12">
                                    <Form-item label="最近一次修改人">
                                        <i-input v-model="devMaintenWork.updateBy" readonly></i-input>
                                    </Form-item>
                                </i-col>
                            </row>
                        </i-col>
                        <i-col span="12">
                            <row>
                                <i-col span="12">
                                    <Form-item label="最近一次修改时间">
                                        <i-input v-model="devMaintenWork.updateTime" readonly></i-input>
                                    </Form-item>
                                </i-col>
                            </row>
                        </i-col>
                    </Row>
                    <row>
                        <i-col span="12">
                            <Form-item  label="故障描述" prop="recordDescr">
                                <i-input type="textarea" v-model="devMaintenWork.recordDescr" placeholder="故障描述" readonly></i-input>
                            </Form-item>
                        </i-col>
                        <i-col span="12">
                            <Form-item  label="原因分析" prop="reason">
                                <i-input type="textarea" v-model="devMaintenWork.reason" placeholder="原因" readonly></i-input>
                            </Form-item>
                        </i-col>
                    </row>
                    <row>
                        <i-col span="12">
                            <Form-item  label="解决办法" prop="solution">
                                <i-input type="textarea" v-model="devMaintenWork.solution" placeholder="解决办法" readonly></i-input>
                            </Form-item>
                        </i-col>
                        <i-col span="12">
                            <Form-item  label="备注信息" prop="remark">
                                <i-input type="textarea" v-model="devMaintenWork.remark" placeholder="备注信息" readonly></i-input>
                            </Form-item>
                        </i-col>
                    </row>
                    <Card>
                        <p slot="title">
                            换件记录
                        </p>
                        <div>
                            <table id="swapRecord"></table>
                        </div>
                    </Card>
                </i-form>
            </Tab-pane>
            <Tab-pane label="现场照片" name="record1">
                <Row :gutter="16" >
                    <!--维修前照片上传-->
                        <template v-if="devMaintenWork.ticketLiveImageGroup">
                            <template  v-for="(liveImages,liveIndex) in devMaintenWork.ticketLiveImageGroup " :key="liveIndex">
                                <i-col span="24">
                                    <Card :bordered="true">
                                        <p slot="title">{{liveImages.groupName}}</p>
                                        <Row>
                                            <i-col span="3" v-for="(liveImg,liveIndexs) in liveImages.ticketLiveImages ">
                                                <div class="imgBox" >
                                                    <a :href="liveImg.path" target="_blank">
                                                        <img :src="liveImg.path" style="width: 60%"/>
                                                    </a>
                                                </div>
                                            </i-col>
                                        </Row>
                                    </Card>
                                </i-col>
<!--                                <i-col span="24" class="lineConten" v-if="devMaintenWork.ticketLiveImageGroup.length-liveIndex>1"></i-col>-->
                            </template>
                        </template>
                    <template v-else>
                        <i-col span="8">
                            暂未上传现场照片
                        </i-col>
                    </template>
                </Row>
            </Tab-pane>
            <Tab-pane label="措施跟踪" name="record2">
                <table id="jqGrid"></table>
            </Tab-pane>
            <Tab-pane label="附件列表" name="record3">
                <div>
                    <table id="annexList"></table>
                </div>
            </Tab-pane>
        </Tabs>
    </Card>
    <Modal v-model="liveImageModal" title="维护现场照片列表" width="960">
        <Row>
            <i-col span="6" v-for="liveImage in liveImageList" style="margin-right: 2px">
                <image :src="liveImage" style="width: 100%" @click="preview(liveImage)"/>
            </i-col>
        </Row>
    </Modal>
</div>

<script>
    // var repair_code = getQueryString("repair_code");
    var id = getQueryString("Id");
    // var devCode = getQueryString("devCode");
    // var devId = getQueryString("devId");
    var vm = '';
    $(function () {
        $("#jqGrid").Grid({
            url: ' ../devFaultPreventMeasure/list?repairTicketId=' + id,
            height: 400,
            multiselect:false,
            colModel: [
                {label: '问题描述', name: 'problemDesc',width:360},
                {label: '预防措施', name: 'content',width:360},
                {label: '制定人', name: 'zdrName',width:80},
                {label: '制定时间', name: 'updateTime', width:100},
                {label: '开始日期', name: 'startDate', width:100},
                {label: '结束日期',name: 'endDate', width:100},
                {label: '实施人',name: 'ssrName' ,width:80,},
                {label: '执行状态', width:100,
                    formatter: function (value, col, row) {
                        return sysEnums.TICKET_STATUS[row.status];
                    }
                },
                { label: '是否异常', width:100,
                    formatter: function (value, col, row) {
                        return sysEnums.TICKET_CHECK_RESULT[row.checkResult];
                    }},
                { label: '实施时间', width:100, name: 'implementDate'},
                {
                    label: '现场照片', sortable: false, width:80,
                    formatter: function (value, col, row) {
                        return "<button class='btn btn-outline btn-info' id='showText' onclick='vm.loadMaintenanceTicketLiveImage(\"" + row.pmTicketItemId + "\")'>&nbsp;<i class='fa fa-file-text-o'></i></button>";
                    }
                },
                {name: 'id', key: true, hidden: true},
                {name: 'STATUS', hidden: true},
                {name: 'pmTicketItemId', hidden: true},
            ]
        });



        vm = new Vue({
            el: '#rrapp',
            data: {
                devMaintenWorkBefor:[
                    'https://file.iviewui.com/dist/afa4b3de057f5d8a540af0ae303885b0.png',
                    'https://file.iviewui.com/dist/afa4b3de057f5d8a540af0ae303885b0.png',
                    'https://file.iviewui.com/dist/afa4b3de057f5d8a540af0ae303885b0.png',
                    'https://file.iviewui.com/dist/afa4b3de057f5d8a540af0ae303885b0.png'
                ],
                liveImageModal: false,// 是否展示维护工单现场照片
                liveImageList: [], // 维护工单现场照片列表
                devMaintenWork: {
                    devProductName: '',
                    devProductCode: '',
                    isSure: 0,
                    devStatus: 4,
                    uploadDate: '',
                    faultCon: '',
                    devProceNo: '',
                    devProceName: '',
                    uploadName: '',
                    uploadId: '',
                    devId: '',
                    devName: '',
                    repairCode: '',
                    workshopId: '',
                    workshopName: '',
                    id: '',
                    repairUser: '',
                    repairUserName: '',
                    startRepairTime: '',
                    endRepairTime: '',
                    liveImageList: [],
                    repairDuration: '',
                    source: '',
                    originRepairRecordId:''
                },
                ticketSource: {'HMI': '一键报修', 'SYSTEM': '系统报修', 'SECOND': '补充录入'},
                vfgList: [], // VFG列表
                cccList: [], // CCC列表
                categoryCode: '',//业务分类代码，可供设备大类查询
                alarmList: [], //报警代码下拉
                flag: '0', //是否新增报警代码新增
                faultTree: {}
            },
            methods: {
                /*获取换件记录*/
                getChangeRecord:function () {
                    var queryUrl = '../sparepartconsumrecord/list';
                    var paramArray = [];
                    if (id) {
                        paramArray.push('businessId=' + id);
                    }
                    paramArray.push('type=' + 'REPAIR');
                    if (paramArray.length > 0) {
                        queryUrl += '?' + paramArray.join('&');
                    }
                    $.jgrid && ($.jgrid.info_dialog = function (caption, content, c_b, modalopt) {
                        alert(content);
                    });
                    $("#swapRecord").Grid({
                        url: queryUrl,
                        height: 110,
                        colModel: [
                            {label: '备件编码', name: 'partCode', index: 'PART_CODE', width: 120},
                            {label: '备件名称', name: 'name', index: 'NAME', width: 120},
                            {label: '规格', name: 'spec', index: 'SPEC', width: 120},
                            {label: '添加人', name: 'createUserName', width: 60, sortable: false, hidden: true},
                            {label: '添加时间', name: 'gmtCreate', width: 60, sortable: false, hidden: true},
                            {label: '领料单号', name: 'materCode', width: 60, sortable: false},
                            {label: '使用数量', name: 'num', index: 'NUM', width: 60, editable: true, editrules: {number: true}},
                            {name: 'sparePartId', hidden: true},
                            {name: 'type', hidden: true},
                            {name: 'businessId', hidden: true},
                            {label: 'id', name: 'id', index: 'ID', key: true, hidden: true},
                        ],
                        forceFit: true,

                    });
                },
                preview: function (url) {
                    if (url) {
                        window.open(url, '_blank');
                    } else {
                        alert('还未上传文件');
                    }
                },
                loadMaintenanceTicketLiveImage: function (itemId) {
                    let _this = this;
                    // 获取维护工单现场照片
                    Ajax.request({
                        url: "../devplangc/" + itemId + "/liveImages",
                        type: "POST",
                        successCallback: function (r) {
                            if (r.code == 0) {
                                _this.liveImageList = r.liveImageList;
                                if (_this.liveImageList.length == 0) {
                                    iview.Message.warning('暂未上传现场照片！');
                                } else {
                                    _this.liveImageModal = true;
                                }
                            }
                        }
                    });
                },
                /*获取附件列表*/
                getAnnexList:function (){
                    var queryUrl = '../annexfile/equList';
                    var paramArray = [];
                    if (vm.devMaintenWork.originRepairRecordId) {
                        paramArray.push('moduleId=' + vm.devMaintenWork.originRepairRecordId);
                    }
                    paramArray.push('moduleType=' + '1');
                    if (paramArray.length > 0) {
                        queryUrl += '?' + paramArray.join('&');
                    }
                    $("#annexList").Grid({
                        url: queryUrl,
                        height: 500,
                        colModel: [
                            {label: '附件标题', name: 'fileName', index: 'FILE_NAME', width: 120},
                            {label: '附件名称', name: 'relName', index: 'REL_NAME', width: 120},
                            {
                                label: '上传时间', name: 'uploadDate', index: 'UPLOAD_DATE', width: 120, formatter: function (value) {
                                    return transDate(value, "yyyy-MM-dd hh:mm:ss");
                                }
                            },
                            {label: '上传用户', name: 'createUserName', index: 'CREATE_NAME', width: 60},
                            {
                                label: '操作', width: 60, align: 'center', sortable: false,
                                formatter: function (value, col, row) {
                                    return "<div onclick='fileCommonHandle(\"" + row.url + "\", \"" + row.relName + "\")'><i class='fa fa-eye'></i>&nbsp;查看</div>"
                                }
                            },
                            {label: 'id', name: 'id', index: 'ID', key: true, hidden: true}
                        ]
                    });
                },
                // 调整维修日时，针对派工时间、开始维修时间、结束维修时间、效果确认时间、添加维修记录时间进行修改
                adjustRepairDateTime: function () {
                    // 调整维修时间格式
                    if (vm.devMaintenWork.dispatchTime) {
                        vm.devMaintenWork.dispatchTime = gmt2DateTimeStr(vm.devMaintenWork.dispatchTime);
                    }
                    if (vm.devMaintenWork.startRepairTime) {
                        vm.devMaintenWork.startRepairTime = gmt2DateTimeStr(vm.devMaintenWork.startRepairTime);
                    }
                    if (vm.devMaintenWork.endRepairTime) {
                        vm.devMaintenWork.endRepairTime = gmt2DateTimeStr(vm.devMaintenWork.endRepairTime);
                    }
                    if (vm.devMaintenWork.sureDate) {
                        vm.devMaintenWork.sureDate = gmt2DateTimeStr(vm.devMaintenWork.sureDate);
                    }
                    Ajax.request({
                        url: '../devmaintenwork/update',
                        params: JSON.stringify(vm.devMaintenWork),
                        type: "POST",
                        contentType: "application/json",
                        successCallback: function (r) {
                            iview.Message.success('更新成功');
                        }
                    });
                },
                // 加载报警代码
                loadAlarmCategory(queryCondition, callback) {
                    Ajax.request({
                        url: '../alarmcategory/queryAll?' + queryCondition,
                        async: true,
                        successCallback: data => {
                            if (data.list == 0) {
                                alert('无可选设备报警分类，请等待维护完毕后再进行完善！')
                                return;
                            }
                            callback(data.list);
                        }
                    });
                },
                // 加载设备备件代码列表
                loadDevAlarmList(cccId, devId) {
                    Ajax.request({
                        url: '../alarmcodebase/queryAll?alarmCategoryId=' + cccId + '&devId=' + devId,
                        async: true,
                        successCallback: data => {
                            this.alarmList = data.list;
                        }
                    });
                },
                // 加载报警代码
                loadAlarmCategory(queryCondition, callback) {
                    Ajax.request({
                        url: '../alarmcategory/queryAll?' + queryCondition,
                        async: true,
                        successCallback: data => {
                            if (data.list == 0) {
                                alert('无可选设备报警分类，请等待维护完毕后再进行完善！')
                                return;
                            }
                            callback(data.list);
                        }
                    });
                }
            }
        });
        loadRecord(id);
    })
    function loadRecord(repair_id) {
        Ajax.request({
            url: "../devRepairRecord/info/" + repair_id,
            async: false,
            successCallback: function (r) {
                vm.devMaintenWork = r.devMaintenRepair;
                console.log(vm.devMaintenWork,'这里面')
                // 如果故障分类ID存在，那么加载报警列表
                if (r.devMaintenRepair.faultCategoryId) {
                    vm.loadDevAlarmList(r.devMaintenRepair.faultCategoryId, r.devMaintenRepair.devId)
                }
                //获取报警分类
                if (r.devMaintenRepair.vrtId) {
                    vm.loadAlarmCategory('pid=' + r.devMaintenRepair.vrtId, function (vfgList) {
                        vm.vfgList = vfgList;
                        if (r.devMaintenRepair.vfgId) {
                            vm.loadAlarmCategory('pid=' + r.devMaintenRepair.vfgId, function (cccList) {
                                vm.cccList = cccList;
                            });
                        }
                    });
                }
                vm.getAnnexList()
                vm.getChangeRecord()
            }
        });
    }

</script>
</body>
</html>
